<template>
	<div id="calendar">
		<div class="month">
			<ul>
				<li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
				<li class="year-month" @click="pickYear(currentYear,currentMonth)">
					<span class="choose-year">{{ currentYear }}年{{ currentMonth }}月</span>
				</li>
				<li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
			</ul>
		</div>
		<ul class="weekdays">
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
			<li>五</li>
			<li>六</li>
			<li>日</li>
		</ul>
		<ul class="days">
			<li v-for="(dayobject, index) in days" style="height: 63px;" class="day-grid" :key="index" @click="addEvents(dayobject.day, $event)">
				<span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span>
				<span v-else>
					<span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" class="active">{{ dayobject.day.getDate() }}</span>
					<span v-else>{{ dayobject.day.getDate() }}</span>
				</span>
				<div class="events-num" v-if="initNum(dayobject.day)">{{initNum(dayobject.day)}}</div>
			</li>
		</ul>
	</div>
</template>



<script>
	import { dateFormat, siblings } from '../../scripts/until'
	import _ from 'lodash'

	export default {
		name: "vueCalendar",
		data() {
			return {
				currentDay: 1,
				currentMonth: 1,
				currentYear: 1970,
				currentWeek: 1,
				days: [],
				leftobj: [
					//存放剩余数量
					{ count: 1 },
					{ count: 2 },
					{ count: 3 },
					{ count: 4 },
					{ count: 5 }
				],
				numList: {}
			}

		},
		props: {
			list: {
				default: []
			}
		},
		created: function () {
			this.initData();

		},
		methods: {
			order: function (day) {
				//预定函数
				if (this.leftobj[day.index].count >= 1) this.leftobj[day.index].count--;
				else alert("已经没有位置了");
			},
			initData: function (cur) {
				var leftcount = 0; //存放剩余数量
				var date;
				var index = 0; //控制显示预定的天数 ，比如下面设置只能预定三天的
				//this.initleftcount(); 每次初始化更新数量
				//有两种方案  一种是每次翻页 ajax获取数据初始化   http请求过多会导致资源浪费
				// 一种是每次请求 ajax获取数据初始化    数据更新过慢会导致缺少实时性
				//还可以setTimeout 定时请求更新数据  实现数据刷新（可能会更好）

				if (cur) {
					date = new Date(cur);
				} else {
					// var now = new Date();
					// var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
					// d.setDate(5);
					// console.log(new Date(this.formatDate(2017, 1, 1)))
					// date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
					// console.log(date)
					date = new Date()
					date.setDate(1)
				}
				this.currentDay = date.getDate();
				this.currentYear = date.getFullYear();
				this.currentMonth = date.getMonth() + 1;

				this.currentWeek = date.getDay(); // 1...6,0
				if (this.currentWeek == 0) {
					this.currentWeek = 7;
				}
				var str = this.formatDate(
					this.currentYear,
					this.currentMonth,
					this.currentDay
				);
				this.days.length = 0;
				// 今天是周日，放在第一行第7个位置，前面6个
				//初始化本周
				for (var i = this.currentWeek - 1; i >= 0; i--) {
					var d = new Date(str);
					d.setDate(d.getDate() - i);

					var dayobject = {};
					dayobject.day = d;
					var now = new Date();
					if (
						d.getDate() === now.getDate() &&
						d.getMonth() === now.getMonth() &&
						d.getFullYear() === now.getFullYear()
					) {
						dayobject.index = index++; //从今天开始显示供预定的数量
					} else if (index != 0 && index < 3) dayobject.index = index++; //从今天开始3天内显示供预定的数量

					this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
				}
				//其他周
				for (var i = 1; i <= 35 - this.currentWeek; i++) {
					var d = new Date(str);
					d.setDate(d.getDate() + i);
					var dayobject = {};
					dayobject.day = d;
					var now = new Date();
					if (
						d.getDate() === now.getDate() &&
						d.getMonth() === now.getMonth() &&
						d.getFullYear() === now.getFullYear()
					) {
						dayobject.index = index++;
					} else if (index != 0 && index < 3) dayobject.index = index++;
					this.days.push(dayobject);
				}
			},
			pickPre: function (year, month) {
				// setDate(0); 上月最后一天
				// setDate(-1); 上月倒数第二天
				// setDate(dx) 参数dx为 上月最后一天的前后dx天
				var d = new Date(this.formatDate(year, month, 1));
				d.setDate(0);
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
			},
			pickNext: function (year, month) {
				var d = new Date(this.formatDate(year, month, 1));
				d.setDate(35);
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
			},
			pickYear: function (year, month) {
				this.$emit('cancel-special');
				_.forEach(document.querySelectorAll('.day-grid'), item => {
					item.classList.remove('select-day')
				})
			},
			// 返回 类似 2016-01-02 格式的字符串
			formatDate: function (year, month, day) {
				var y = year;
				var m = month;
				if (m < 10) m = "0" + m;
				var d = day;
				if (d < 10) d = "0" + d;
				return y + "-" + m + "-" + d;
			},
			addEvents: function (date, $event) {
				this.$emit('choose-day', this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()));
				// console.log();
				_.forEach(document.querySelectorAll('.day-grid'), item => {
					item.classList.remove('select-day')
				})
				$event.currentTarget.classList.add('select-day');
			},
			initNum: function (date) {
				// let that = this;
				// setTimeout(function() {
				return this.numList[dateFormat(date, 'ymd')]
				// console.log( that.numList )
				// }, 3000);
			},
			getCount: function () {
				let that = this;
				setTimeout(function () {
					let list = [];
					_.forEach(that.list, item => {
						item.date = dateFormat(item.date, 'ymd');
						list.push(item);
					})
					that.numList = _.countBy(list, item => {
						return item.date
					})
				}, 200);
			}
		},
		mounted() {
			this.getCount()
		},
		watch: {
			list(val) {
				this.getCount()
			}
		}
	};
</script>

<style lang="scss" scoped>
	#calendar {
		width: 600px;
		li {
			box-sizing: content-box;
		}
		/* margin: 0 auto; */
		/* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1), */
		/* 0 1px 5px 0 rgba(0, 0, 0, 0.12); */
		border: 2px solid #2873a6;
	}
	.month {
		width: 100%;
		background: #2873a6;
	}

	.month ul {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
	}

	.year-month {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.year-month:hover {
		background: rgba(150, 2, 12, 0.1);
	}

	.choose-year {
		cursor: pointer;
		padding-left: 20px;
		padding-right: 20px;
	}

	.choose-month {
		text-align: center;
	}

	.arrow {
		cursor: pointer;
		padding: 12px;
		transition: 0.4s ease-in-out;
	}

	.arrow:hover {
		background: rgba(100, 2, 12, 0.1);
	}

	.month ul li {
		color: white;
		font-size: 20px;
		text-transform: uppercase;
		letter-spacing: 3px;
	}

	.weekdays {
		margin: 0;
		padding: 10px 0;
		background: rgba(64, 158, 255, 0.44);
		display: flex;
		flex-wrap: wrap;
		color: #ffffff;
		justify-content: space-around;
	}

	.weekdays li {
		display: inline-block;
		width: 13.6%;
		text-align: center;
	}

	.days {
		padding: 0;
		background: #ffffff;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		.events-num {
			background: #fa5555;
			width: 20px;
			height: 20px;
			font-size: 12px;
			text-align: center;
			line-height: 20px;
			color: #fff;
			border-radius: 50%;
			margin: 15px auto 0;
		}
	}

	.days li {
		list-style-type: none;
		display: inline-block;
		width: 14.2%;
		text-align: center;
		padding-bottom: 15px;
		padding-top: 15px;
		font-size: 1rem;
		color: #000;
		transition: 0.4s ease-in-out;
		cursor: pointer;
		border-radius: 5px;
	}

	.days li .active {
		padding: 6px 10px;
		border-radius: 50%;
		background: #409eff;
		color: #fff;
	}

	.days li .other-month {
		padding: 5px;
		color: gainsboro;
	}

	.days li:hover {
		background: #e1e1e1;
	}

	.select-day {
		background: #e1e1e1;
	}
</style>
